<template>
  <div class="main">
    <div id="cesiumContainer" :style="{'width':getViewerWidth+'%'}"></div>
    <TopToolBar v-if="show"></TopToolBar>
    <LayerTree v-if="show"></LayerTree>
  </div>
</template>

<script>
import LayerTree from './components/LayerTree.vue';
import TopToolBar from './views/TopToolBar.vue';

export default {
  name: "HomeView",
  components: {
    LayerTree,
    TopToolBar
  },
  data() {
    return{
      show:false
    }
  },
  computed:{
    getViewerWidth(){
      return this.$store.state.vieweWidth
    }
  },
  async mounted () {
    let url = "./static/scene.json";
    let viewer = await zz3d.createMapEx("cesiumContainer", url)
    viewer = Object.preventExtensions(viewer)
    if(viewer) this.show = true
    this.$store.commit('setViewer',viewer)
    window.viewer = viewer
  }
};
</script>

<style> 
  .main {
    height: 100%;
  }     
  #cesiumContainer {
    height: 100%;
  }
</style>
